<div class="bjui-pageContent">
    <div class="bjui-doc">
        <h3 class="page-header">data属性</h3>
        <blockquote>
            <p>本框架内置组件及部分插件都可以通过data属性来初始化并使用，通常通过data-toggle来调用API。如无特殊说明，相关参数也通过data属性传递。</p>
        </blockquote>
        <blockquote class="point">
            <p>data属性无法向JS传递含有大写字母的参数，如果参数是驼峰格式(大小写混搭)，则需将大写字母转换为<code>-</code>加小写。如：
                <br><code>reloadWarn</code> --> <code>data-reload-warn</code>
                <br><code>maxAddLevel</code> --> <code>data-max-add-level</code>
            </p>
        </blockquote>
        <p>以下是data属性应用示例（打开一个navtab标签）：</p>
        <pre class="brush: html">
            <a href="form.html" data-toggle="navtab" data-id="navtab-form" data-title="表单应用">打开一个表单应用的navtab</a>
        </pre>
        <p>点击上面的a链接后，将打开一个名为“表单应用”的navtab，其效果等同下面的js：</p>
        <pre class="brush: js">
            $(selector).navtab({id:'navtab-form', url:'form.html', title:'表单应用'})
        </pre>
        <p><code>selector</code>是符合jQuery规范的选择器。</p>
        <blockquote class="point">
            <p>为了方便使用，如无特殊说明，<code>selector</code>可以是任意元素的选择器(不确定或在直接定义的function中，使用<code>$(this)</code>即可)，
                <br>如开始创建了navtab：
                <code>$('.openTab').navtab({id:'myid', url:'myurl', title:'mytitle'})</code>，
                <br>然后又刷新该navtab：
                <code>$('.refreshTab').navtab('refresh', 'myid')</code>，
                <br>虽然两次触发操作同一navtab的<code>selector</code>并不一致，但并不影响使用。
            </p>
        </blockquote>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>